﻿<!--Breadcrumb Start-->
<div class="breadcrumb-container">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="breadcrumbs">
                    <ul>
                        <li class="home"><a href="{:url('index/index')}">Home</a><span>/ </span></li>
                        <li><strong>Checkout</strong></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--End of Breadcrumb-->
<!--Cart Main Area Start-->
<div class="cart-main-area area-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="page-title">
                    <h1>Shopping</h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <form action="#">
                    {if $list}
                    <div class="cart-table table-responsive">
                        <table>
                            <thead>
                            <tr>
                                <th class="p-image">Product Image</th>
                                <th class="p-name">Product Name</th>
                                <th class="p-edit"></th>
                                <th class="p-amount">Unit Price</th>
                                <th class="p-quantity">Qty</th>
                                <th class="p-total">SubTotal</th>
                                <th class="p-times"></th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}

                            <input type="hidden" name="products_id[]" value="{$vo.data.id}">
                            <tr>
                                <td class="p-image">
                                    <a href="{:url('goods/detail',['id' => $vo.data.goods.id])}"><img alt="" src="{$vo.data.image}" class="floatleft"></a>
                                </td>
                                <td class="p-name"><a href="{:url('goods/detail',['id' => $vo.data.goods.id])}">{$vo.data.goods.name}</a></td>
                                <td class="edit"><a href="{:url('goods/detail',['id' => $vo.data.goods.id])}" style="text-decoration: revert;">Edit</a></td>
                                <td class="p-amount">{$vo.data.price}</td>
                                <td class="p-quantity"><input maxlength="12" type="text" value="{$vo.num}" name="num[]" readonly></td>
                                <td class="p-total">{$vo.total_price}</td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        <div class="all-cart-buttons">
                            <button class="button" type="button" id="checkout"><span style="background: red">Proceed To Checkout</span></button>
                        </div>
                    </div>
                    {/if}
                    <div class="row" id="addressBox">
                        <div class="col-md-4">
                            {if $address}
                            <input type="hidden" name="address_id" value="{$address.id}">
                            <div class="shipping-discount">
                                <div class="shipping-title">
                                    <h3>Shopping Address</h3>
                                </div>
                                <p>{$address.name} | {$address.mobile}</p>
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-sm-6">
                                        <div class="level">
                                            Country: {$address.area}
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-6">
                                        <div class="level">
                                            Detail: {$address.detail}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/if}
                            <div class="all-cart-buttons">
                                <button id="add_address" class="button" type="button"><span>Add New Shopping Address</span></button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--Newsletter Popup Start-->
<div id="add_address-conatiner" style="display: none;">
    <div id="address-pop-up">
        <span class="hide-popup" style="color: red">Close</span>
        <div class="subscribe-pop-up">
            <form id="newsletter-form" class="form-horizontal form-ajax" role="form" method="post" action="#">
            <div class="content-subscribe">
                    Name
                    <div class="input-box">
                        <input type="text" class="input-text newsletter-subscribe" name="addressName" data-rule="required">
                    </div>
                    Phone
                    <div class="input-box">
                        <input type="phone" class="input-text newsletter-subscribe" name="addressMobile" maxlength="10"  data-rule="required">
                    </div>
                    Area
                    <div class="input-box">
                        <input type="text" class="input-text newsletter-subscribe" name="addressArea" data-rule="required">
                    </div>
                    Detail
                    <div class="input-box">
                        <input type="text" class="input-text newsletter-subscribe" name="addressDetail" data-rule="required">
                    </div>
                    <div class="actions">
                        <button class="button-subscribe" title="Add" type="submit" id="add_address_button">Add</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--End of Newsletter Popup-->
<!--End of Cart Main Area-->
<style>
    #newsletter-form .input-box, #newsletter-form .content-subscribe .actions {
        float: none;
    }
    #add_address-conatiner {
        background-color: rgba(0, 0, 0, 0.7);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 9998;
    }

    #address-pop-up {
        background: #fff;
        color: #999999;
        height: 400px;
        left: 50%;
        min-width: 450px;
        padding: 35px;
        position: absolute;
        text-align: left;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 600px;
    }
    input{border:1px solid #ccc;padding:7px 0px;border-radius:3px;padding-left:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}input:focus{border-color:#66afe9;outline:0; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
</style>